<template>
	<view>
		<view v-if="!show" class="position-fixed top-0 bottom-0 left-0 right-0 bg-light flex align-center justify-center">
			<text class="text-muted font">正在加载...</text>
		</view>
		<view v-else catchtouchmove="return">
			<!-- 状态栏 -->
			<uni-status-bar></uni-status-bar>
			<!-- logo -->
			<view class="flex w-100 justify-center" style="margin-top: 200rpx;">
				<image src="../../static/logo.jpg" style="width: 560rpx;height: 560rpx;"></image>
			</view>
			<!-- 说明文字-->
			<view class="text-center font-md" style="color: #828282;">
				智慧窨井盖
			</view>
			<!-- 登录表单 -->
			<view class="flex justify-center mt-5">
				<view style="width: 460rpx;">
					<view class="flex align-stretch">
						<view class="border-bottom flex align-center justify-center">
							<image src="../../static/imgs/user.png" style="width: 40rpx;height: 40rpx;"></image>
						</view>
						<input type="text" v-model="form.username" class="border-bottom p-1 flex-1"/>
					</view>
					<view class="flex align-stretch mt-2">
						<view class="border-bottom flex align-center justify-center">
							<image src="../../static/imgs/password.png" style="width: 40rpx;height: 40rpx;"></image>
						</view>
						<input :password="!pwdStatus" v-model="form.password" class="border-bottom p-1 flex-1"/>
						<view class="border-bottom flex align-center justify-center" style="width: 50rpx;" @click="pwd">
							<image :src="pwdStatus?'/static/imgs/eye.jpg':'/static/imgs/no_eye.jpg'" style="width: 40rpx;height: 40rpx;"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 登录 -->
			<view class="py-2 mx-5 mt-5">
				<button class="text-white rounded" style="border: 0;" type="primary" :disabled="disabled" :class="disabled ? 'bg-main-disabled':'bg-main'" @click="submit" :loading="loading">
					{{loading ? '登录中...' : '登录'}}
				</button>
			</view>
			<!-- 版权 -->
			<view class="fixed-bottom flex justify-center mb-5">
				<text class="font-sm" style="color: #b7bbc5;">Copyright ©️ 2021 浙江北华智能装备有限公司 版权所有</text>
			</view>
			<!-- 微信登录 -->
			<!-- <view class="fixed-bottom mb-5">
				<wy-login></wy-login>
			</view> -->
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				loading: false,
				pwdStatus: false,
				form: {
					username: '',
					password: '',
				}
			}
		},
		computed: {
			disabled() {
				if(this.form.username === '' || this.form.password === '') {
					return true
				}
				return false
			}
		},
		created() {
			let token = uni.getStorageSync('token')
			if (!token) {
				return this.show = true
			}
			// 用户已登录
			uni.switchTab({
				url:"/pages/index/index"
			})
		},
		methods: {
			// 显示密码
			pwd() {
				this.pwdStatus = !this.pwdStatus
			},
			submit() {
				this.loading = false
				this.$H.post('/login', this.form, {
					header: {'Content-Type': 'application/json;charset=UTF-8'}
				}).then(res => {
					this.loading = false
					// 修改vuex的state,持久化存储
					this.$store.commit('loginToken', res.token);
					// 登录成功跳转
					uni.switchTab({
						url: '../index/index'
					})
				}).catch(err => {
					// 登录失败
					this.loading = false
				})
			}
		}, // end methods
	}
</script>

<style>

</style>
